import React, { useState, useRef, useEffect, createContext } from 'react'
import '@/test.css'
import BasicMonkey from '@/images/basic-monkey.png'
import CommentList from '@/components/commentList'
import ItemInfo from '@/components/itemInfo'
import Footer from '@/components/footer'
import RefInput from '@/components/RefInput'
import data from '@/data-list'
import className from 'classnames'
import dayjs from 'dayjs'
import { MsgContent, MsgProvider } from '@/components/msgContent.js'
import { useToggle } from '@/components/toggle.js'
import axios from 'axios'
import { useGetTabList } from '@/api/index'

function AppComment() {
  const [inputValue, setValue] = useState('')
  const [showItemValue, setShowItemValue] = useState('测试')
  const [currentData, setCurrentData] = useState({
    id: undefined,
    name: 'No.1',
    like: 16888,
    time: dayjs(new Date()).format('MM-DD hh:mm'),
    img: 'basic-monkey.png',
    comment: '',
  })

  const [isShowMessage, setShowMessage] = useState(true)

  const { value, toggle } = useToggle()

  const msg = 'provider msg'

  const [type, setType] = useState('hot')
  const childRef = useRef(null)
  const inputRef = useRef(null)
  //1、useRef生成ref对象，绑定到dom标签上
  const divRef = useRef(null)
  //2、dom可用，ref.current获取dom

  //发布评论
  function handlePublish() {
    setCurrentData({
      ...currentData,
      id: Math.random(),
      comment: inputValue,
    })
    setValue('')
    inputRef.current.focus()
  }

  const { tabList, setTabList } = useGetTabList()

  useEffect(() => {}, [inputValue])

  function changeType(type) {
    setType(type)
    if (type === 'latest') {
      childRef.current?.orderBy(type)
    } else {
      childRef.current?.orderBy(type)
    }
  }

  function showDom() {
    console.log(divRef.current)
  }

  function getSonItemInform(info) {
    setShowItemValue(info.name)
  }

  return (
    <div className="container">
      <div className="container-inner">
        <div style={{ color: 'red', fontSize: '14px', fontWeight: '800' }}>
          渲染评论列表
        </div>
        <div className="headSpan">
          <span>评论{10}</span>

          {tabList.map(item => (
            <span
              key={item.type}
              className={className('tab-class', { active: type === item.type })}
              onClick={() => changeType(item.type)}
            >
              {item.name}
            </span>
          ))}
          {/* <span style={{marginLeft:'100px',color:'gray'}}>最新</span>
            <span className="middleLine"></span>
            <span style={{color:'gray'}}>最热</span> */}
        </div>
      </div>

      <div className="headSpan">
        <img
          src={BasicMonkey}
          alt="test"
          style={{ width: '38px', height: 'auto', margin: '0 12px' }}
        />
        <div className="d-flex" style={{ width: '80%' }}>
          <RefInput
            inputValue={inputValue}
            setValue={setValue}
            ref={inputRef}
          ></RefInput>
          {/* <input
            value={inputValue}
            ref={inputRef}
            style={{ width: '70%', flex: 1, marginRight: '20px' }}
            placeholder="发一条友善的评论"
            onChange={e => setValue(e.target.value)}
          /> */}
          <button
            style={{
              width: '60px',
              color: 'blue',
              borderRadius: '5px',
              border: '1px solid blue',
            }}
            onClick={handlePublish}
          >
            发布
          </button>
        </div>
      </div>
      <div ref={divRef}>
        <div className="middle-line">分割线</div>
        <div onClick={showDom}>{showItemValue}</div>
        {value && (
          <ItemInfo style={{ marginLeft: '100px' }} name={showItemValue} />
        )}
        <button onClick={toggle}>{value ? '隐藏' : '显示'}</button>
        <hr />
      </div>

      <MsgProvider>
        <CommentList
          id={1}
          onRefReady={methods => (childRef.current = methods)}
          currentData={currentData}
          getItemInfo={getSonItemInform}
        ></CommentList>
      </MsgProvider>

      <Footer></Footer>
    </div>
  )
}
//在react中使用store的数据，需要用到一个钩子函数-useSelector,它的作用是把store中的数据映射到组件中
export default AppComment
